<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1></h1>
    <button id="start">开始</button>
    <button id="pause">暂停</button>
    <script>
        // 获取开始按钮
        let startBtn = document.getElementById("start");
        // 获取暂停按钮
        let pauseBtn = document.getElementById("pause");

        // 开启定时器
        let timer = 0;
        startBtn.onclick = function(){
            clearInterval(timer);
            timer = setInterval(showTime,1000);
        }

        // 暂停定时器
        pauseBtn.onclick = function(){
            clearInterval(timer);
        }

        function showTime(){
            // 获取年月日时分秒
            let date = new Date();
            // 拼接显示的内容
            let dateStr = `${date.getFullYear()}年${date.getMonth()+1}月${date.getDate()}日 ${date.getHours()}:${date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()}:${date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds()}`;
            // 获取页面上的H1标签
            let h1 = document.querySelector("h1");
            // 把显示的内容放入H1标签中
            h1.innerText = dateStr;
        }

        showTime();
    </script>
</body>
</html>